<template>
    <div>
        <div class="footer-wrap">
            <div class="contact" @touchend.stop.prevent="showMyWeChat">
                <a class="icon wechat">加我微信</a>
            </div>
            <div class="contact">
                <a class="icon phone" :href="'tel:' + query.mobile">拨打电话</a>
            </div>
            <a class="btn" @touchend.stop.prevent="get">免费领取</a>
        </div>
        <div class="modal-mask" v-show="showWeChatSwitch">
            <div class="modal-wrap">
                <div class="modal-container">
                    <div class="item">
                        <div v-if="query.image" class="avatar"><img :src="query.image"></div>
                        <div v-else class="avatar"><img src="~assets/img/common/avatar_default.png"></div>
                        <div class="box-item">
                            <p><b class="name">{{ query.name }}</b> <span>平安保险顾问</span></p>
                            <p>加我微信，免费为您提供咨询服务</p>
                            <a :href="query.profile" style="color:blue">查看名片>></a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="QR">
                            <img :src="query.qrCode" @touchend.stop.prevent="showQrCode">
                        </div>
                        <div class="box-item">
                            <p>微信号：<span>{{ query.wechatNo }}</span></p>
                            <p>长按图片,识别图中二维码即可加我为好友哟~</p>
                        </div>
                    </div>
                    <span class="close-icon" @touchend.stop.prevent="closeMyWeChat"></span>
                </div>
                <div class="dialog-wxCode-img" :class="{ 'show': showQrCodeSwitch }" @touchend.stop.prevent="closeQrCode" v-if="query.qrCode">
                    <img :src="query.qrCode" width="100%"/>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'FooterBar',
        data() {
            return {
               showWeChatSwitch: false,
               showQrCodeSwitch: false,
               query: (() => {
                    if (Object.keys(this.$route.query).length) {
                        localStorage.setItem('query', JSON.stringify(this.$route.query))
                        return this.$route.query
                    }
                    else {
                        return JSON.parse(localStorage.getItem('query'))
                    }
                    return {}
                })()
            }
        },
        components: {
        },
        computed: {
        },
        methods: {
          get: function () {
            this.$parent.freeGet()
          },
          showMyWeChat: function () {
            this.showWeChatSwitch = true
          },
          closeMyWeChat: function () {
            this.showWeChatSwitch = false
          },
          showQrCode: function () {
            this.showQrCodeSwitch = true
          },
          closeQrCode: function () {
            this.showQrCodeSwitch = false
          }
        }
    }
</script>
<style>
</style>